
<script>
import throttle from 'lodash/throttle';

export default {
  name: 'Tabs',

  props: {
    tabList: {
      type: Array,
      default() {
        return []
      }
    }
  },

  data() {
    return {
      
    };
  },

  mounted() {

  },

  methods: {
    // 对tab进行节流处理
    select: throttle(function(event) {
      console.log(event);
      const { name } = event.target.dataset;
      // const tabname = attrs.findIndex(item => item.name === 'tabname');
      // 有userId这个对象才进行跳转
      const active = this.tabList.find(item => item.isActive);
      // 判断如果当前选中和点击的一样就不再做处理
      if (active.id === name) return;
      if (name) {
        this.tabList.forEach(item => {
          if (item.id == name) {
            item.isActive = true;
            return;
          }
          item.isActive = false;
        });
        this.$emit('target', name);
      }
    }, 300)
  },

  render(h) {
    // tab栏每一项
    let tabItem = this.tabList.map(item => {
      return h('li', {
        attrs: {
          tabName: item.id,
          'data-name': item.id
        },
        staticClass: 'tab-item',
        class: {
          isActive: item.isActive
        },
        domProps: {
          innerHTML: item.tabName
        },
        // directives: [
        //   {
        //     name: "bind",
        //     rawName: "v-bind",
        //     value: item.id,
        //     expression: "item.id",
        //   },
        // ],
      });
    });
    return h('div', {
      attrs: {
        id: 'content-tab'
      }
    }, [
      h('div', {
        staticClass: 'tab'
      }, [
        // 事件委派
        h('ul', {
          staticClass: 'tab-list',
          on: {
            click: this.select
          }
        }, [tabItem])
      ]),
      // 插槽
      h('div', {
        staticClass: 'other'
      }, [
        this.$slots.other 
      ])
    ]);
  }
};
</script>

<style lang="less" scoped>
#content-tab {
  height: 66px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tab {
    // position: absolute;
    // width: calc(100vw - 210px);
    .tab-list {
      height: 60px;
      display: flex;
      align-items: center;
      margin-left: 30px;
      margin-bottom: 0;
      .tab-item {
        margin: 10px;
      }
      .isActive {
        font-weight: 700;
        color: #2c3e50;
        &::after {
          display: block;
          content: "";
          height: 4px;
          width: 90%;
          margin: 0 auto;
          background-color: #ec4141;
          border-radius: 2px;
        }
      }
    }
  }
}
</style>